<template lang="html">
  <div class="box">
    <div class="t_header">
      <el-form :inline="true" :model="formInline" label-width="180px" class="demo-form-inline">
        <el-form-item >
          <el-input v-model="formInline.name" placeholder="收货人名称/供应商名称"></el-input>
        </el-form-item>
        <el-form-item >
          <el-select v-model="formInline.select" placeholder="订单状态">
            <el-option label="全部" value=""></el-option>
            <el-option label="已发货" value="0"></el-option>
            <el-option label="未发货" value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" class="el_button" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="body">
      <el-table :data="tableData.list" style="width: 100%" align="center">
        <el-table-column prop="sm_name" label="供应商名称" width="">
            <template slot-scope="scope">
                <el-popover placement="right" trigger="hover" @show="getUserInfo(scope.row)">
                  <p><img class="user_avatar" :src="userInfo.head_pic" alt=""></p>
                  <p>姓名：{{userInfo.name}}</p>
                  <p>手机号：{{userInfo.phone}}</p>
                  <el-tag slot="reference" style="cursor:pointer" type="primary">{{scope.row.sm_name}}</el-tag>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column prop="user_name" label="收货人名称" width=""></el-table-column>
        <el-table-column prop="phone" label="收货人电话" width=""></el-table-column>
        <el-table-column prop="address" label="收货地址" width="">
          <template slot-scope="scope">
              <el-popover trigger="hover">
                <p>{{scope.row.address_detail}}</p>
                <el-button slot="reference" size="small">{{scope.row.address}}</el-button>
              </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="用户支付时间" width=""></el-table-column>
        <el-table-column label="状态">
            <template slot-scope="scope">
                <p v-if="scope.row.status == 0">未发货</p>
                <p v-if="scope.row.status == 1">已发货</p>
            </template>
        </el-table-column>
        <el-table-column prop="" label="操作" width="">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">提醒发货</el-button>
            </template>
        </el-table-column>
      </el-table>
      <el-pagination layout="prev, pager, next" :current-page="currentPage" :page-count='tableData.rows'  @current-change="changePage" align="center"></el-pagination>
    </div>


  </div>
</template>

<script>
export default {
  data(){
    return {
      formInline:{},
      tableData:{},
      userInfo:[],
      currentPage:1
    }
  },
  created(){
    this.getObdDeliverList()
  },
  methods:{
    getObdDeliverList(page = 1){
      this.currentPage = page;
      this.$http2.getObdDeliverList({
        name: this.formInline.name,
        status: this.formInline.select,
        page: page
      }).then(res=>{
        if(res.data.code == 1){
          this.tableData = res.data.data
        }else{
          this.tableData = {}
        }
      })
    },
    getUserInfo(e){
      this.$http2.getSmUserInfo({
        sm_id:e.sm_id
      }).then(res=>{
        this.userInfo = res.data.data
      })
    },
    handleClick(e){
      this.$confirm("提醒发货").then(_=>{
        this.$http2.remindDeliver({
          sm_id: e.sm_id
        }).then(res=>{
          if(res.data.code == 1){
            this.$message.success(res.data.msg)
          }else{
            this.$message.error(res.data.msg)
          }
        })
      }).catch();
    },
    changePage(p){
      this.getObdDeliverList(p)
    },
    onSubmit(){
        this.getObdDeliverList()
    },
  }
}
</script>

<style lang="css" scoped>
@import "../../my-style/app.css";
.user_avatar{
  width: 50px;
  height: 50px;
  border-radius: 100%;
  display: block;
}
</style>
